<template>
    <div class="content">
        <Header></Header>

        <!-- 搜索 -->
        <div class="header-img-contain">
			<div class="flex-column-centers">
                <div class="search-title" v-if="userType">
                    <router-link to="#" class="active" v-if="userType != 'company'">找工作</router-link>
                    <router-link to="/looking-for-talent" v-else>找人才</router-link>
                </div>
                <div class="search-title" v-else>
                    <router-link to="#" class="active">找工作</router-link>
                    <router-link to="/looking-for-talent">找人才</router-link>
                </div>
                <div class="search-contain">
                    <div class="job-search-bg search-input-contain">
                        <input type="text" v-model="req.keywords" placeholder="请输入您要寻找的职位！">
                    </div>
                    <div class="search-button-contain mt10">
                        <button class="pointer" title="搜索" @click="init">
                            <i class="search-button-icons"></i>
                        </button>
                    </div>
                </div>
<!-- 
                <div class="hot-tag">
                    <em>热门关键字：</em>
                    <span v-for="(item, index) in hotKeys" :key="index">{{item}}</span>
                </div>
                 -->
            </div>
		</div>
        <!-- 搜索 end-->

        <!-- 筛选 -->
        <div class="filter-package mt20">
            <div class="filter-title filter-city">
                <em>选择城市</em>
                <div class="filter-tag mt10">
                    <el-radio v-model="radio" @change="fn_radio(item.id)" :label="item.id" chea v-for="(item,index) in area" :key="index">{{item.name}}</el-radio>
                </div>
            </div>
            <div class="filter-title filter-addr" v-if="radio">
                <em>工作地点</em>
                <div class="filter-tag">
                    <span :class="{'active': req.workDistrict == ''}" @click="req.workDistrict=''">不限</span>
                    <span v-for="(item, i) in area_children" :key="i" :id="item.id" :class="{'active': req.workDistrict == item.id}" @click="req.workDistrict=item.id">{{item.name}}</span>
                </div>
            </div>
            <div class="filter-title filter-saley">
                <em>职位薪资</em>
                <div class="filter-tag">
                    <span :class="{'active': salary_index == ''}" @click="fn_salary()">不限</span>
                    <span v-for="(item, index) in salary" :key="index" :id="item.id" :class="{'active': salary_index == item.id}" @click="fn_salary(item)">{{item.name}}</span>
                </div>
            </div>
            <div class="filter-title filter-type" style="overflow: hidden;">
                <em>职位亮点</em>
                <div class="filter-tag">
                    <span :class="{'active': req.jobBright == ''}" @click="req.jobBright=''">不限</span>
                    <span v-for="(item, index) in jianxi" :class="{'active': req.jobBright == item.name}" @click="req.jobBright=item.name" :key="index" :id="item.id">{{item.name}}</span>
                </div>
            </div>

            <div class="filter-title filter-more">
                <em style="line-height:36px; margin-top: 0;">更多筛选</em>
                <div>
                    <el-select v-model="req.belongsIndustry" placeholder="所属行业">
                        <el-option v-for="item in belongsIndustry"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="req.companyScale" placeholder="企业规模">
                        <el-option v-for="item in companyScale"
                                    :key="item.name"
                                    :label="item.name"
                                    :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="req.education" placeholder="学历要求">
                        <el-option v-for="item in educationRequirements"
                                    :key="item.name"
                                    :label="item.name"
                                    :value="item.id">
                        </el-option>
                    </el-select>
                    <!-- <el-select v-model="req.experience" placeholder="工作经验">
                        <el-option v-for="item in workExperience"
                                    :key="item.name"
                                    :label="item.name"
                                    :value="item.id">
                        </el-option>
                    </el-select> -->
                </div>
            </div>
        </div>
        <!-- 筛选 end -->

        <!-- 工作列表 -->
        <div class="job-items">
            <div class="sorry fl" v-show="thisSorry"> 
                <img src="../assets/sorry/sorry.png" alt="">
                <div class="sorry-title">
                    <p class="sorry-p1">对不起，没有找到符合您条件的职位！</p>
                    <p class="sorry-p2">放宽您的查找条件也许有更多合适您的职位哦~</p>
                </div>
            </div>
            <div class="leftBox fl" v-show="!thisSorry">
<!--                 
                <div class="filter-view">
                    <em>排序方式</em>
                    <div class="filter-list" v-if="req.sort">
                        <span class="filter-item" @click="req.sort=''">综合排序<i class="icon-orientation"></i></span>
                        <span class="filter-item active" @click="req.sort=1">更新时间<i class="icon-orientation active"></i></span>

                    </div>
                    <div class="filter-list" v-else>
                        <span class="filter-item active" @click="req.sort=''">综合排序<i class="icon-orientation active"></i></span>
                        <span class="filter-item" @click="req.sort=1">更新时间<i class="icon-orientation"></i></span>
                    </div>
                    <div class="filter-pages">
                        <a href="javascript:;" @click="page.hasPrevious ? (req.page = page.crr_page-1) : ''"><i class="icon-prev"></i></a>
                        {{page.crr_page}} / {{page.pages}} 页
                        <a href="javascript:;" @click="page.hasNext ? (req.page = page.crr_page+1) : ''"><i class="icon-next"></i></a>
                    </div>
                </div> 
-->

                <div class="job-list">
                    <div class="job-item" v-for="(item , index) in data" :key="index">
                        <div class="checkbox fl"><input type="checkbox" v-model="checkModel" :value="item.id"></div>
                        <ul class="fl">
                            <li> <span class="pointer" @click="routerLink('/internship-detail/'+item.id, true)">{{item.jobTitle}}</span></li>
                            <li>{{item.companyName}} <span class="saley">{{item.salaryStart||0}}k - {{item.salaryEnd||0}}K/月</span></li>
                            <li>学历: {{item.educationDesc}} | 经验: {{item.experienceDesc}} | 职位性质: {{item.jobNature | jobNature}} | 人数: {{item.recruitmentNumber||0}}人 | 地点: {{item.workAreaDesc +'-'+ item.workDistrictDesc}}</li>
                            <li>
                                <span class="tag" v-for="(v , i) in ((item.jobBright != null && item.jobBright != '') ? item.jobBright.split(',') : '')" :key="i">{{v}}</span>
                            </li>
                        </ul>
                        <div class="tools fr">
                            <button v-if="item.isApplied == 2" @click="addPositionApplied(item.id)"><i class="icon-send"></i>职位申请</button>
                            <button v-else class="old"><i class="icon-send"></i>已投递</button>

                            <span v-if="item.isCollection == 1" class="active" @click="btn_collection(item.id)"><i class="icon-star"></i>收藏</span>
                            <span v-else @click="btn_collection(item.id)"><i class="icon-star"></i>收藏</span>
                        </div>
                    </div>
                </div>

                <div class="all-btn">
                    <input type="checkbox" @click="checkAll" id="checkbox" v-model="checked">
                    <button @click="addBatchPositionApplied">申请职位</button>
                    <button @click="addBatchPositionCollection">收藏职位</button>
                </div>

                <el-pagination
                    background
                    prev-text="上一页" 
                    next-text="下一页" 
                    layout="prev, pager, next"
                    @current-change="curPage"
                    :page-size="page.count"
                    :total="page.total">
                </el-pagination>
            </div>

            <div class="rightBox fr">
                <h3>最新职位</h3>
                <ul>
                    <li v-for="(item ,index) in recommend" :key="index" :id="item.companyId" @click="routerLink('/internship-detail/'+item.id, true)">
                        <div class="job_type">{{item.jobTitle}}
                            <span v-if="item.isNegotiable == 1">面议</span>
                            <span v-else class="type_1">{{item.salaryStart||0}}K-{{item.salaryEnd||0}}K/月</span>
                        </div>
                        <div class="name">{{item.companyName}}</div>
                        <div class="address">{{item.workAreaDesc}}</div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 工作列表 end-->

        <Footer></Footer>
    </div>
</template>


<script>
    import Header from '@/views/components/header/header'
    import Footer from '@/views/components/header/footer'
    import { list ,  collection, filter_list, findRecommendedPositionList, addPositionApplied, addBatchPositionCollection, addBatchPositionApplied} from '@/api/jobs'
export default {
    name: "jobs",
    data() {
        return {
            hotKeys: ['销售', 'java', '人事会计', 'UI平面设计', '行政web', '前端', '房地产'],
            search: '',
            thisSorry:false,//有无职位
            checked:false, //是否全选
            checkModel:[], //双向数据绑定的数组，我是用的id
            req: {
               	belongsIndustry: '',
                jobNature: 2,
                companyScale: '',
                education: 0,
                experience: '',
                jobBright: '',
                keywords:'',
                limit: 10,
                page: 1,
                salaryEnd: '',
                salaryStart: '',
                workArea: '',
                workDistrict: '',
                sort:''
            },
            data:{},
            recommend:{},
            accountid : this.$store.getters.accountid,
            jianxi:{},
            belongsIndustry: {},
            companyScale:{},
            workExperience:{},
            educationRequirements:[
                {id: 0 , name: '无要求'},
                {name : "初中", id : 32},
                {name : "高中", id : 33},
                {name : "中技", id : 34},
                {name : "中专", id : 35},
                {name : "大专", id : 36},
                {name : "本科", id : 37},
                {name : "硕士", id : 38},
                {name : "博士", id : 39},
                {name : "博后", id : 40}
            ],
            salary:{},
            salary_index:'',
            radio: '',
            area:{},
            area_children: [],
            page:{},
            positionCollectionInfos:[],
            userType: this.$store.getters.userType,
        };
    },
    components:{Header, Footer},
    watch:{
       checkModel(){
    　　　　if(this.checkModel.length==this.data.length){
    　　　　　　this.checked=true;
    　　　　}else{
    　　　　　　this.checked=false;
    　　　　}
    　　},
        req:{
            handler(newVal, oldVal) {
                this.init();
            },
            immediate: true,
            deep: true
        },
    },
    created(){
        this.loading();
    },
    filters: {
        jobNature(val){
            let __jobNature = '';
            switch(val){
                case 0 :
                    __jobNature = '不限'
                    break;
                case 1 :
                    __jobNature = '全职'
                    break;
                case 2 :
                    __jobNature = '兼职'
                    break;
                case 3 :
                    __jobNature = '实习'
                    break;
            }
            return __jobNature
        }
    },
    methods:{
        curPage(e){
            this.req.page = e;
        },
        fn_radio(val){
            this.req.workArea = val;
            if(val == this.area[0].id){
                this.area_children = this.area[0].children;
            }else{
                this.area_children = this.area[1].children;
            }
        },
        fn_salary(item){
            if(item){
                this.salary_index=item.id;

                if(item.name.indexOf('以上') != -1){
                    let _salary = item.name.split('K')
                    this.req.salaryStart = _salary[0];
                    this.req.salaryEnd =  '';
                }else{
                    let _salary = item.name.split('~');
                    this.req.salaryStart = _salary[0].substring(0 , _salary[0].length - 1);
                    this.req.salaryEnd = _salary[1].substring(0 , _salary[1].length - 1);
                }

            }else{
                this.salary_index= '';
                this.req.salaryStart = '';
                this.req.salaryEnd = '';
            }
        },
        checkAll(){
    　　　　if(this.checked){
    　　　　　　this.checkModel=[];
    　　　　}else{
    　　　　　　this.data.forEach((item)=>{
        　　　　　　if(this.checkModel.indexOf(item.id)==-1){
        　　　　　　　　this.checkModel.push(item.id)
        　　　　　　}
    　　　　　　})
    　　　　}
    　　},
        init(){
            list(this.req).then(res => {
                if(res.code == 0){
                    if (res.data=="") {
                        this.thisSorry=true;
                    }else{
                        this.thisSorry=false;
                        this.data = res.data;
                        //分页部分
                        this.page.crr_page = this.req.page;
                        this.page.pages = res.pages; // 总页码
                        this.page.count = res.count; //每页显示
                        this.page.total = res.total; //总条数
                        this.page.hasPrevious = res.hasPrevious; //是否有上一页
                        this.page.hasNext = res.hasNext; //是否有下一页
                    }
                }else{
                    this.msgWarn(res.msg);
                }
            }).catch(err => {
                console.log(err)
            });
        },
        loading(){
            //获取地区
            filter_list({data:'area'}).then(res => {
                this.area = res.datas[0].children;
            }).catch(err => {
                console.log(err)
            });

            //获取薪酬
            filter_list({data:'salary'}).then(res => {
                this.salary = res.datas[0].children;
            }).catch(err => {
                console.log(err)
            });
            filter_list({data:'jianxi'}).then(res => {
                this.jianxi = res.datas[0].children;
            }).catch(err => {
                console.log(err)
            });
            //所属行业
            filter_list({data:'belongsIndustry'}).then(res => {
                this.belongsIndustry = res.datas[0].children;
            }).catch(err => {
                console.log(err)
            });
 
            //企业规模
            filter_list({data:'companyScale'}).then(res => {
                this.companyScale = res.datas[0].children;
            }).catch(err => {
                console.log(err)
            });

            //推荐
            findRecommendedPositionList({"limit": 10, "page": 1}).then(res => {
                this.recommend = res.data;
            }).catch(err => {
                console.log(err)
            });
        },
        btn_collection(positionId){
            let data = {};
            data.accountId = this.$store.getters.accountid;
            data.positionId = positionId;
            collection(data).then(res => {
                if(res.resp_code == 0){
                    this.msgSuccess(res.resp_msg);
                    this.init();
                }else{
                    this.msgWarn(res.resp_msg)
                }
            }).catch(err => {
                this.loading = false
                console.log(err)
            })
        },
        addPositionApplied(positionId){
            let data = {
                positionId: positionId,
                resumeId: 5,
                resumeSource: '',
                statusTag: ''
            }
            addPositionApplied(data).then(res => {
                if(res.resp_code == 0){
                    this.init();
                    this.msgSuccess(res.resp_msg);
                }else{
                    this.msgWarn(res.resp_msg)
                }
            }).catch(err => {
                this.loading = false
            })
        },
        addBatchPositionCollection(){
            let data = {};
            data.positionCollectionInfos = [];

            let accountid = this.$store.getters.accountid
            if(this.checkModel.length > 0){
                for (let i = 0; i < this.checkModel.length; i++) {
                    let map = {"accountId": accountid, "positionId": this.checkModel[i]};
                    data.positionCollectionInfos.push(map)
                }
                addBatchPositionCollection(data).then(res =>{
                    if(res.resp_code == 0){
                        this.msgSuccess(res.resp_msg)
                    }
                }).catch(err => {
                    this.loading = false
                    this.msgWarn(err)
                })
            }else{
                this.msgWarn("请先选择要收藏的工作")
            }
        },

        addBatchPositionApplied(){
            let data = {};
            data.positionAppliedInfos = [];

            let accountid = this.$store.getters.accountid
            if(this.checkModel.length > 0){
                for (let i = 0; i < this.checkModel.length; i++) {
                    let map = {
                        "positionId": this.checkModel[i],
                        "resumeSource": "",
                        "statusTag": ""
                    };
                    data.positionAppliedInfos.push(map)
                }
                addBatchPositionApplied(data).then(res =>{
                    if(res.resp_code == 0){
                        this.msgSuccess(res.resp_msg)
                    }
                }).catch(err => {
                    this.loading = false
                    this.msgWarn(err)
                })
            }else{
                this.msgWarn("请先选择要投递的工作")
            }
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
a:hover {
    color: #fff;
}
.header {
    position: absolute;
    width: 100%;
    top: 0;
    >>>.top{
        background: rgba(0, 0, 0, 0.52);
    }
    >>>.nav {
        background: rgba(0, 0, 0, 0.45);
    }
}
.header-img-contain {
    width: 100%;
    min-width: 1200px;
    height: 306px;
    background: url('../assets/image/enterprise/jxsx-bg.png') no-repeat;
    background-size: 100% 100%;

    .flex-column-centers{
        width: 540+86px;
        position: absolute;
        top: 140px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);

        .search-title{
            font-size: 18px;
            font-weight: bold;
            color: #FFFFFF;
            margin-bottom: 5px;
            // opacity: 0.78;
            a{
                margin-left: 30px;
                &.active{
                    font-size: 24px;
                    color: #F5F5F5;
                }
                &:last-child{
                    margin-left: 22px;
                }
            }
        }

        .search-contain{
            overflow: hidden;
            width: 539+88px;
            .job-search-bg {
                float: left;
                width: 539px;
                height: 62px;
                background: url('../assets/image/search-bg-1.png') no-repeat;
                background-size: 100%;

                input{
                    outline: none;
                    width: 539px;
                    height: 48px;
                    margin-top: 12px;
                    margin-left: 2px;
                    font-size: 18px;
                    border: 0;
                    background: none;
                    font-weight: 400;
                    color: #fff;
                    padding-left: 25px;
                    border-radius: 50px;

                    &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
                        color: #E4E4E4;
                    }
                    &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                        color: #E4E4E4;
                    }
                    &::-moz-placeholder { /* Mozilla Firefox 19+ */
                        color: #E4E4E4;
                    }
                    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
                        color: #E4E4E4;
                    }
                }
            }
            .search-button-contain{
                float: right;
                width: 88px;
                height: 52px;
                background: url('../assets/image/enterprise/search-button-bg.png') no-repeat;
                background-size: 100%;

                button {
                    background: transparent;
                    width: 88px;
                    height: 52px;
                    border-width: 0px !important;
                    outline: none;
                    .search-button-icons {
                        margin-left: 25px;
                        display: block;
                        width: 27px;
                        height: 28px;
                        background: url('../assets/image/enterprise/search-button-icons.png') no-repeat;
                    }
                }
            }
        }

        .hot-tag{
            width: 539+88px;
            margin-top: 20px;
            padding-left: 30px;
            color: #F5F5F5;
            em{
                font-style: normal;
            }
            span{
                display: inline-block;
                margin-right: 10px;
                cursor: pointer;
                font-size: 14px;
            }
        }
    }
}

.filter-package{
    width: 1200px;
    background-color: #fff;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    div.filter-title{
        // overflow: unset;
        padding-left: 50px;
        margin-top: 15px;
        min-height: 24px;
        height: auto;
        em{
            width: 60px;
            font-style: normal;
            margin-right: 20px;
            height: 24px;
            line-height: 24px;
            float: left;
            margin-bottom: 5px;
            margin-top: 5px;
        }
        .filter-tag{
            overflow: hidden;
            float: left;
            width: 90%;
            min-height: 24px;
            height: auto;
            span{
                display: inline-block;
                height: 24px;
                line-height: 24px;
                padding: 0 10px;
                margin-bottom: 5px;
                margin-top: 5px;
                cursor: pointer;
                color: #666;
                &.active{
                    color: #fff;
                    background: #5DA9C1;
                    border-radius: 2px;
                }
            }
        }

        &.filter-more{
            margin-top: 5px;
            display: block;
            clear: both;
            margin-bottom: 25px;
        }
    }

    >>>.el-select.el-select--medium{
        margin-right: 10px;
    }

    >>>.el-input--medium .el-input__inner {
        width: 108px;
        // height: 32px;
        // line-height: 32px;
        // border: 1px solid #BE485E;
    }
    >>>.el-select .el-input .el-select__caret {
        color: #BE485E;
    }

    // >>>.el-input.search-button-icons.el-input--suffix{
    //     >>>.el-input__suffix{
    //         top: 3px !important;
    //     }
    // }

    // >>>.el-input.search-button-icons.el-input--suffix.is-focus{
    //     >>>.el-input__suffix{
    //         top: -2px !important;
    //     }
    // }
}

.job-items{
    margin: 20px auto;
    width: 1200px;
    overflow: hidden;
    .sorry{
        width: 952px;
        height: 300px;
        background-color: #fff;
        margin-bottom: 10px;
        display: flex;
        justify-content:center;

        img{
            width: 100px;
            height: 100px;
            line-height: 200px;
            margin:auto 20px;
        }

        .sorry-title{
            margin:auto 0px;

            .sorry-p1{
                color:#E36772;
                font-size: 20px;
                margin-bottom: 20px;
            }
            .sorry-p2{
                color:#949296;
            }
        }

    }
    .leftBox{
        width: 952px;

        .filter-view{
            width: 100%;
            height: 55px;
            background-color: #fff;

            em{
                font-style: normal;
                font-size: 14px;
                font-weight: 400;
                line-height: 55px;
                color: #666666;
                float: left;
                margin-left: 28px;
            }

            .filter-list{
                width: 700px;
                height: 55px;
                float: left;
                span{
                    margin-top: 12px;
                    font-size: 14px;
                    font-weight: 400;
                    color: #666;
                    height: 32px;
                    line-height: 32px;
                    border: 1px solid #E4E4E4;
                    border-radius: 4px;
                    display: inline-block;
                    padding: 0 15px;
                    margin-left: 15px;
                    cursor: pointer;
                    i{
                        display: inline-block;
                        width: 9px;
                        height: 9px;
                        background: url(../assets/image/icon-orientation-fasle.png) no-repeat;
                        margin-left: 5px;
                    }
                    &.active{
                         color: #BE485E;
                        i{
                            background: url(../assets/image/icon-orientation.png) no-repeat;
                        }
                    }
                }
            }
            .filter-pages{
                float: right;
                margin-right: 25px;
                height: 55px;
                line-height: 55px;
                font-size: 14px;
                font-weight: 400;
                color: #666666;
                a{
                    &:first-child{
                        margin-right: 15px;
                        i{
                            background: url(../assets/image/icon-left.png) no-repeat;
                        }
                    }
                    &:last-child{
                        margin-left: 15px;
                        i{
                            background: url(../assets/image/icon-right-2.png) no-repeat;
                            background-size: 100%;
                        }
                    }
                    i{
                        width: 6px;
                        height: 9px;
                        display: inline-block;
                    }

                }
            }
        }

        .job-list{
            // margin-top: 20px;
            overflow: hidden;
            width: 952px;
            .job-item{
                width: 100%;
                height: 180px;
                margin-bottom: 10px;
                padding: 25px 20px;
                overflow: hidden;
                background-color: #fff;
                .checkbox{
                    margin-right: 15px;
                }
                ul{
                    width: 630px;
                    li{
                        font-size: 14px;
                        font-weight: 400;
                        color: #343434;
                        margin-top: 15px;
                        &:nth-child(1){
                            font-size: 18px;
                            font-weight: 400;
                            color: #5EAAC2;
                            margin-top: 0;
                        }

                        &:nth-child(2){
                            font-size: 16px;
                            font-weight: 400;
                            span{
                                font-size: 16px;
                                color: #BE485E;
                                float: right;
                            }
                        }
                        &:nth-child(3),
                        &:nth-child(4){
                           margin-top: 20px;
                        }

                        .tag{
                            display: inline-block;
                            font-size: 12px;
                            font-weight: 400;
                            color: #949296;
                            background: #FFFFFF;
                            border: 1px solid #E7E7E7;
                            padding: 5px 10px;
                            margin-right: 5px;
                            border-radius: 2px;
                        }

                    }
                }
                .tools{
                    button{
                        outline: none;
                        cursor: pointer;
                        border: 0;
                        color: #FFF;
                        width: 128px;
                        height: 42px;
                        background: #3EACC4;
                        border-radius: 4px;
                        margin-top: 50px;

                        &.old{
                            background: #fff;
                            border: 1px solid #3EACC4;
                            border-radius: 4px;
                            color: #3EABC4;

                            i{
                                background: url("../assets/image/icon-send.png") no-repeat;
                            }
                        }

                        i{
                            display: inline-block;
                            width: 17px;
                            height: 17px;
                            background: url("../assets/image/icon-send-2.png") no-repeat;
                            background-size: 100%;
                            margin-bottom: -3px;
                            margin-right: 10px;
                        }
                    }
                    span{
                        cursor: pointer;
                        display: block;
                        color: #787878;
                        font-size: 14px;
                        text-align: center;
                        margin-top: 10px;

                        i{
                            width: 16px;
                            height: 15px;
                            display: inline-block;
                            background: url(../assets/image/icon-star-no.png) no-repeat;
                            margin-bottom: -1px;
                            margin-right: 5px;
                        }

                        &.active{
                            i{
                                background: url(../assets/image/icon-star.png) no-repeat;
                            }
                        }
                    }
                }
            }
        }

        .all-btn{
            margin-top: 20px;
            input{
                margin-left: 20px;
                margin-bottom: -5px;
            }
            button{
                cursor: pointer;
                outline: none;
                width: 82px;
                height: 32px;
                background: #F9F9F9;
                border: 1px solid #E3E3E3;
                border-radius: 4px;
                color: #666666;
                margin-right: 5px;
                margin-left: 5px;
            }
        }

        >>>.el-pagination{
            margin-top: 50px;
            margin-bottom: 80px;
            text-align: center;

            button{
                cursor: pointer;
                outline: none;
                width: 70px;
                height: 30px;
                background: #FFFFFF;
                border: 1px solid #EBEBEB;
                border-radius: 4px;
                font-size: 14px;
                color: #777777;
                margin-left: 5px;
                margin-right: 5px;
                font-weight: 400;
                &:disabled{
                    color: #BBBBBB;
                }
            }

            .el-pager{
                .number{
                    background: #FFFFFF;
                    border: 1px solid #EBEBEB;
                    font-weight: normal;
                    width: 30px;
                    height: 30px;
                    color: #777777;
                    &.active{
                        background: #3DABC4;
                        border-radius: 4px;
                        color: white;
                    }
                }
            }

        }


        .pages{
            margin-top: 50px;
            margin-bottom: 80px;
            text-align: center;
            button{
                cursor: pointer;
                outline: none;
                width: 70px;
                height: 30px;
                background: #FFFFFF;
                border: 1px solid #EBEBEB;
                border-radius: 4px;
                font-size: 14px;
                color: #BBBBBB;
                margin-left: 5px;
                margin-right: 5px;
            }

            span{
                button{
                    width: 30px;
                    height: 30px;
                    color: #777777;

                    &.crr{
                        background: #3DABC4;
                        border-radius: 4px;
                        color: white;
                    }
                }
            }
        }
    }

    .rightBox{
        width: 228px;
        background-color: #fff;

        border: 1px solid #EEE;
        border-radius: 4px;
        h3{
            height: 55px;
            line-height: 55px;
            font-weight: 400;
            font-size: 16px;
            color: #666666;
            padding-left: 20px;
        }
        ul{
            li{
                padding-left: 20px;
                padding-right: 15px;
                min-height: 90px;
                height: auto;
                border-top: 1px solid #EEE;
                font-size: 12px;
                line-height: 2;
                span{
                    float: right;
                    font-size: 12px;
                    color: #343434;
                    &.type_1{
                        color: #CE3A5C;
                    }
                }

                .job_type{
                    font-size: 14px;
                    font-weight: 400;
                    color: #343434;
                    margin-top: 8px;
                }
                .name{
                    line-height: 1.8;
                }
                .address{
                    line-height: 1.5;
                }
            }
        }
    }
}
</style>
